<template>
  <div>
    <rec-swiper :sliderList="sliderList"></rec-swiper>
    <hot :hotList="hotList"></hot>
    <div class="loading-container" v-show="!hotList.length">
      <loading></loading>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import axios from 'axios'
import { getRecommend, getDiscList } from 'api/recommend'
import { ERR_OK } from 'api/config'
import RecSwiper from './components/RecSwiper'
import Hot from './components/Hot'
import Loading from 'base/loading/Loading'
export default {
  name: 'Recommend',
  components: {
    RecSwiper,
    Hot,
    Loading
  },
  data () {
    return {
      sliderList: [],
      hotList: []
    }
  },
  created () {
    this._getRecommend()
    this._getDiscList()
  },
  methods: {
    _getRecommend () {
      getRecommend().then((res) => {
        if (res.code === ERR_OK) {
          const data = res.data
          this.sliderList = data.slider
        }
      })
    },
    _getDiscList () {
      getDiscList().then((res) => {
        if (res.code === ERR_OK) {
          const data = res.data
          this.hotList = data.list
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .loading-container
    position absolute
    width 100%
    top 50%
    transform translateY(-50%)
</style>
